import { defineComponent, ref } from "vue";
import {
  Card,
  Tabs,
  TabPane,
  Menu,
  Submenu,
  MenuItem,
  Checkbox,
} from "view-ui-plus";
import CheckMethod from "./components/checkMethod";
import Level from "./components/Level";

import styles from "./index.module.less";
import { getLeftList } from "@/api/baseData/testProject";

export default defineComponent({
  props: {},
  emits: [],
  setup() {
    const tabs = ref<any>([]);

    const projectNameCodes = ref();

    const projectId = ref();

    getLeftList().then((res) => {
      tabs.value = res;
    });

    const menuSelect = (name) => {
      projectNameCodes.value = name;
      projectId.value = null;
    };

    const onRadioChange = (id) => {
      projectId.value = id;
    };

    return () => (
      <Card
        bordered={false}
        padding={0}
        dis-hover
        class="ivu-mt ivu-pb30 my-iCrud-container"
      >
        <div class={styles.card}>
          <div class={styles.left}>
            <Tabs model-value={tabs.value[0] ? tabs.value[0].code : ""}>
              {tabs.value.map((item, i) => {
                const menus = item.childrenList;
                return (
                  <TabPane label={item.name} name={`${item.code}`}>
                    {menus.map((menu, j) => {
                      const menuItems = menu.childrenList;
                      return (
                        <Menu
                          key={menu.code}
                          width={"100%"}
                          onOnSelect={menuSelect}
                        >
                          <Submenu
                            name={menu.code}
                            v-slots={{ title: () => menu.name }}
                          >
                            {menuItems.map((menuItem, k) => {
                              return (
                                <MenuItem name={menuItem.code}>
                                  <Checkbox
                                    model-value={
                                      menuItem.code == projectNameCodes.value
                                    }
                                  />
                                  {menuItem.name}
                                </MenuItem>
                              );
                            })}
                          </Submenu>
                        </Menu>
                      );
                    })}
                  </TabPane>
                );
              })}
            </Tabs>
          </div>
          <div class={styles.right}>
            <CheckMethod
              projectNameCodes={projectNameCodes.value}
              onRadioChange={onRadioChange}
            />
            <Level projectId={projectId.value} />
          </div>
        </div>
      </Card>
    );
  },
});
